<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal" >添加</button>
	<table class="table">

		<tr>
			<td>ID</td>
			<td>规格</td>
			<td>属性值</td>
		</tr>
		<c:forEach items="${page.list }" var="item">
			<tr>
				<td>${item.id }</td>
				<td>${item.specName }</td>
				<td>${item.optionNames }</td>
			</tr>
		</c:forEach>

		<tr>
			<td align="center" colspan="3"><a
				href="javascript:goPage(${page.firstPage })">首页</a>
				&nbsp;&nbsp;&nbsp;&nbsp; <a
				href="javascript:goPage(${page.prePage })">上一页</a>
				&nbsp;&nbsp;&nbsp;&nbsp; <a
				href="javascript:goPage(${page.nextPage })">下一页</a>
				&nbsp;&nbsp;&nbsp;&nbsp; <a
				href="javascript:goPage(${page.lastPage })">尾页</a></td>
		</tr>
	</table>

	<div class="modal fade" id="addModal" tabindex="-1"
		aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">规格添加</h5>
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form id="addForm">
						<div class="form-group">
							<label for="recipient-name" class="col-form-label">规格:</label>
							<input type="text" class="form-control" name="specName">
						</div>
						<button type="button" class="btn btn-primary" onclick="addOption()">添加属性</button>
						<div id="dynamic">
							
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary"
						data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" onclick="saveSpec()">保存</button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function goPage(page) {
			
			$("#content").load("./spec/list?currPage=" + page)
		}
		var index = 0
		function addOption() {
			$("#dynamic").append(
					'<div class="form-group">'
					+'<label for="recipient-name" class="col-form-label">属性:'
					+'<button type="button" class="btn btn-link" onclick="delOption(this)">删除</button>'
					+'</label>'
					+'<input type="text" class="form-control" name="options['+index+'].optionName">'
					+'</div>'
				)
			index++;
		}
		function delOption(element) {
			$(element).parent().parent().remove();
		}
		function saveSpec() {
			$.post('./spec/saveSpec',$("#addForm").serialize(),function(data){
				if(data){
					$('#addModal').modal('hide')
					//$("#content").load('./spec/list?currPage=1')
				}else{
					alert("保存失败")
				}
			},'json')
		}
	</script>
</body>
</html>